<template>
  <div class="about">
    <router-view></router-view>
    <h1>添加学生</h1>
    <table style="width:100%;">
      <tr>
        <td>姓名： <input v-model="name"></td>
      </tr>
       <tr>
        <td>账号 <input v-model="account"></td>
      </tr>
       <tr>
        <td>密码 <input v-model="password"></td>
      </tr>
       <tr>
        <td>电话： <input v-model="tel"></td>
      </tr>
       <tr>
        <td>生日 <input v-model="birthday"></td>
      </tr>
       <tr>
        <td>身份： <input v-model="role"></td>
      </tr>
      <tr>
        <td>状态：
          正常<input type="radio" name="status" value="1" v-model="status">
          休学<input type="radio" name="status" value="2" v-model="status">
          退学<input type="radio" name="status" value="3" v-model="status">
        </td>
      </tr>
      <tr>
        <td>
          <button @click="add">保存</button>
        </td>
      </tr>
    </table>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'AddStudent',
  data () {
    return {
      name: '3',
      account: '3',
      password: '3',
      tel: '3',
      avatar: '3',
      birthday: '3',
      status: 3,
      class_id: '3',
      role: '3'
    }
  },
  methods: {
    add () {
      var that = this
      axios({
        method: 'post',
        url: 'http://localhost/addStudent.php',
        data: {
          name: this.name,
          account: this.account,
          password: this.password,
          tel: this.tel,
          avatar: this.avatar,
          birthday: this.birthday,
          status: this.status,
          class_id: this.class_id,
          role: this.role
        }
      }).then(function (res) {
        const data = res
        if (data.status === 200) {
          that.$router.push({ path: '/student' })
        } else {
          alert('保存失败')
        }
        console.log(res)
      })
    }
  }
}
</script>

  <style>
    html, body {
      margin: 0;
      padding: 0;
    }
    h1 {
      margin: 0;
      padding: 0;
      font-size: 16px;
    }
    .header {
      background-color: lightblue;
      height: 80px;
    }
    .container {
      display: flex;
      height: 600px;
    }
    .sidebar {
      background-color: lightgreen;
      flex: 2;
    }
    .main {
      background-color: lightpink;
      flex: 8;
    }
  </style>
